<template>
  <div style="height: 85vh">
    <!-- documentServerUrl="http://172.16.30.55:8088" vpn -->
    <!-- documentServerUrl="http://8.140.23.194:9000" 阿里云 -->
    <!-- <DocumentEditor
      id="docEditor"
      ref="docEditorRef"
      :documentServerUrl="serverUrl"
      :config="config"
      :events_onDocumentReady="onDocumentReady"
      :onLoadComponentError="onLoadComponentError"
      :events="config.events"
      :events_onRequestHistory="onRequestHistory"
    /> -->
    <div id="placeholder" class="nav" style="width: 100%; height: 100%; min-height: 900px"></div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
// import { DocumentEditor } from '@onlyoffice/document-editor-vue'
// import {
//   OfficeHistoryApi,
//   OfficeHistoryVO
// } from '@/api/dev/supervisedatabase/documenteditor/officehistory/index'
import { OnlyOfficeApi } from '@/api/dev/supervisedatabase/documenteditor'

//组件引入
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()

const serverUrl = ref(import.meta.env.VITE_ONLYOFFICE_URL) //documentServerUrl onlyOffice服务器所在地址

var docEditor
// 定义配置对象
const init = (documentType, document, editorConfig) => {
  docEditor = new DocsAPI.DocEditor('placeholder', {
    documentType: documentType,
    document: {
      title: document.title,
      url: document.url, //文件的 URL
      fileType: document.fileType,
      key: document.key,
      permissions: {
        // print: false,
        // download: true, //true/false
        // // edit: true,
        chat: false, //定义“聊天”菜单按钮是显示还是隐藏；请注意，如果您隐藏“聊天”按钮，则相应的聊天功能也将被禁用。默认值为true。
        edit: true,
        comment: true, //评论意见
        download: route.query.mode === '1' ? true : false,
        fillForms: true,
        print: true,
        review: true,
      }
    },
    editorConfig: {
       zoom: 150,  // 设置默认缩放比例为150%
      mode: route.query.mode === '1' ? 'edit' : 'view', //只读view,编辑edit
      callbackUrl:
        ((window as any).webConfig.WINDOW_VITE_BASE_URL
          ? (window as any).webConfig.WINDOW_VITE_BASE_URL
          : import.meta.env.VITE_BASE_URL) + editorConfig.callbackUrl, //回传 URL
      //  callbackUrl: 'http://172.16.30.1' + editorConfig.callbackUrl, //回传 URL
      coEditing: {
        mode: 'fast',
        change: true
      },
      lang: 'zh-CN', // 中文
      user: {
        //用户信息
        name: editorConfig.user.name,
        id: editorConfig.user.id
      },
      customization: {
        margins: {
            left: 37,  // 左边距（单位：毫米）
            right: 37  // 右边距（单位：毫米）
          },
        //定制部分允许自定义编辑器界面，使其看起来像您的其他产品，并更改是否存在其他按钮，链接，更改徽标和编辑者所有者详细信息。
        //"help": false, //定义是显示还是隐藏“帮助”菜单按钮。默认值为true。
        //"hideRightMenu": false, //定义在第一次加载时是显示还是隐藏右侧菜单。默认值为false。
        forcesave: true, //定义保存按钮是否显示默认false
        autosave: true, //定义是启用还是禁用“自动保存”菜单选项。请注意，如果您在菜单中更改此选项，它将被保存到浏览器的localStorage中。默认值为true。
        // commentAuthorOnly: false, //定义用户是否只能编辑和删除他的评论。默认值为false。
        // comments: false, //定义是显示还是隐藏“注释”菜单按钮；请注意，如果您隐藏“评论”按钮，则相应的评论功能将仅可用于查看，评论的添加和编辑将不可用。默认值为true。
        // compactHeader: false, //定义是否将菜单栏放在在徽标旁边使界面更加紧凑默认false。
        // compactToolbar: false, //定义显示的顶部工具栏类型是完整（false）还是紧凑true。默认值为false 多余菜单将在右侧折叠点击显示。
        // compatibleFeatures: false, //定义仅与OOXML格式兼容的功能的使用。例如，不要在整个文档上使用注释。默认值为false。
        // macros: false, //定义是否将运行文档宏以及可用的宏设置。默认值为true。
        // macrosMode: 'warn', //定义是否将运行文档宏。可以采用以下值： disable -根本不运行；enable -自动运行所有宏；warn -警告宏并请求允许运行。默认值为original。
        // plugins: false, //定义是否将启动插件并可用。默认值为true。
        // toolbarNoTabs: false,
        // review: {
        //   showReviewChanges: false //定义在加载编辑器时是否自动显示或隐藏审阅更改面板。默认值为false。
        // },
        // features: {
        //   spellcheck: false //定义在加载编辑器时是否自动打开或关闭拼写检查器。拼写检查器仅适用于文档编辑器和演示文稿编辑器。默认值为true。
        // }
        // logo: {
        //   image:
        //     'http://172.16.30.47:19002/wttest/dd20e91125413d84f66ae4e2d44d54b44ee50d23aeac6365e5a8630ec62bb2f8.png',
        //   imageDark:
        //     'http://172.16.30.47:19002/wttest/dd20e91125413d84f66ae4e2d44d54b44ee50d23aeac6365e5a8630ec62bb2f8.png',
        //   url: 'http://192.168.2.208',
        //   visible: true
        // },
        uiTheme: 'theme-classic-light',
        features: {
          spellcheck: false //定义在加载编辑器时是否自动打开或关闭拼写检查器。拼写检查器仅适用于文档编辑器和演示文稿编辑器。默认值为true。
        }
      }
    },
    height: '100%', //定义浏览器窗口中的文档高度。
    width: '100%', //定义浏览器窗口中的文档宽度。
    // type: 'embedded', // 嵌入式，默认"desktop",移动设备 "mobile"
    events: {
      onRequestHistory,
      onRequestHistoryClose,
      onRequestHistoryData,
      onDocumentReady
    }
  })
}

var onDocumentReady = function () {
  console.log('文档准备好了')
}

var onRequestSaveAs = function (event) {
  var fileType = event.data.fileType
  var title = event.data.title
  var url = event.data.url
}

//getConfig
const getConfig = async (id, type) => {
  await OnlyOfficeApi.getConfig(id, type).then((data) => {
    init(data?.documentType, data?.document, data?.editorConfig)
  })
}

onMounted(() => {
  getConfig(route.query.fileId, route.query.fileType)
  // getOfficeHistory()
})

const queryParams = reactive({
  pageNo: 1,
  pageSize: 100,
  fileId: route.query.fileId,
  tableName: route.query.fileType,
  userId: undefined,
  serverVersion: undefined,
  docKey: undefined,
  fileUrl: undefined,
  filePath: undefined,
  fileName: undefined,
  createTime: []
})
const historyList = ref() //历史记录
const setHistoryList = ref() //onRequestHistoryData方法中使用
// 定义 onRequestHistory 方法
const onRequestHistory = async (event) => {
  // 获取历史记录
  const data = await OfficeHistoryApi.getOfficeHistoryPage(queryParams)
  historyList.value = data.list.reverse().map((item, index) => {
    return {
      created: item.createTime,
      key: item.docKey,
      user: {
        id: item.userId,
        name: item.creator
      },
      version: index + 1
    }
  })

  setHistoryList.value = data.list.map((item, index) => {
    return {
      // changesUrl: config.value.editorConfig.callbackUrl,
      fileType: item.fileSuffix,
      key: item.docKey,
      url: item.fileUrl,
      version: index + 1
    }
  })

  // console.log('window', window)
  // console.log('docEditor', docEditor)

  // getOfficeHistory()
  // window.DocEditor.instances['docEditor'].refreshHistory({
  docEditor.refreshHistory({
    currentVersion: historyList.value.length,
    history: historyList.value
  })
}

const { currentRoute, push, replace } = useRouter()

const onRequestHistoryClose = async () => {
  // document.location.reload()
  // console.log('currentRoute.value', currentRoute.value)
  const { path, query } = currentRoute.value
  await nextTick()
  replace({
    path: '/redirect' + path,
    query: query
  })
}

const onRequestHistoryData = (event) => {
  const version = event.data
  // alert(version)
  // docEditorRef.value.setHistoryData(logjson[version])
  // window.DocEditor.instances['docEditor'].setHistoryData(setHistoryList.value[Number(version) - 1])
  docEditor.setHistoryData(setHistoryList.value[Number(version) - 1])
}

// const userid = ref(JSON.parse(JSON.parse(window.localStorage.getItem('user') as string).v).user.id)
// const username = ref(
//   JSON.parse(JSON.parse(window.localStorage.getItem('user') as string).v).user.nickname
// )

// onDocumentReady 方法
// const onDocumentReady = () => {
//   console.log('Document is loaded')
// }

// onLoadComponentError 方法
// const onLoadComponentError = (errorCode: number, errorDescription: string) => {
//   switch (errorCode) {
//     case -1: // Unknown error loading component
//       console.log(errorDescription)
//       break

//     case -2: // Error load DocsAPI from http://documentserver/
//       console.log(errorDescription)
//       break

//     case -3: // DocsAPI is not defined
//       console.log(errorDescription)
//       break
//   }
// }

onBeforeUnmount(() => {
  // 终止请求
  // controller.value.abort()
  // 销毁office实例
  // window.DocEditor.instances['docEditor'].destroyEditor()
  docEditor.destroyEditor()
})
</script>
